{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
    Seat Selection
{% endblock %}

{% block content %}

<style type="text/css">
    .tg  {border-collapse:collapse;border-spacing:0;}
    .tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
      overflow:hidden;padding:10px 5px;word-break:normal;}
    .tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
      font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
    .tg .tg-f6ho{border-color:#ffffff;font-size:16px;text-align:center;vertical-align:middle}
    .tg .tg-czno{border-color:#ffffff;font-size:16px;text-align:center;vertical-align:top}
    </style>
    <table class="tg">
    <thead>
      <tr>
        <th class="tg-f6ho"><img src="https://www.dropbox.com/s/8uc8r11f9q68447/eight.PNG?raw=1" height="600px" /></th>
        <th class="tg-czno"><br><br>
            <style type="text/css">
            .tg  {border-collapse:collapse;border-spacing:0;}
            .tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
              overflow:hidden;padding:10px 5px;word-break:normal;}
            .tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
              font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
            .tg .tg-6ym0{background-color:#c0c0c0;font-size:24px;text-align:center;vertical-align:middle}
            .tg .tg-y6fn{background-color:#c0c0c0;text-align:center;vertical-align:middle}
            .tg .tg-60hs{font-size:20px;text-align:center;vertical-align:middle}
            .tg .tg-480y{font-family:Arial, Helvetica, sans-serif !important;;font-size:16px;text-align:center;vertical-align:middle}
            .tg .tg-7hap{font-size:20px;font-weight:bold;text-align:center;vertical-align:middle}
            .tg .tg-qn5d{font-family:Arial, Helvetica, sans-serif !important;;font-size:16px;font-weight:bold;text-align:center;
              vertical-align:middle}
            </style>
            <table class="tg">
            <thead>
              <tr>
                <th class="tg-y6fn"></th>
                <th class="tg-6ym0">Seat A</th>
                <th class="tg-6ym0">Seat B</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="tg-60hs">Seat</td>
                <td class="tg-480y">{{ session.vars.row1_a }}{{ session.vars.col1_a }}</td>
                <td class="tg-480y">{{ session.vars.row1_b }}{{ session.vars.col1_b }}</td>
              </tr>
              <tr>
                <td class="tg-60hs">Seat Class</td>
                <td class="tg-480y">Economy</td>
                <td class="tg-480y">Economy</td>
              </tr>
              <tr>
                <td class="tg-60hs">Legroom</td>
                <td class="tg-480y"><img src="https://www.dropbox.com/s/5w9ptwe4nkhv25l/legroom.png?raw=1" height="70px" /><br>
                    {{ session.vars.legroom2_a }} in. better <br>than main</td>
                <td class="tg-480y"><img src="https://www.dropbox.com/s/0ucjaluj97qpxqj/legroom_short.png?raw=1" height="70px" /><br>
                    {{ session.vars.legroom2_a }} in. worse <br>than main</td>
              </tr>
              <tr>
                <td class="tg-60hs">Flight Length</td>
                <td class="tg-480y" colspan="2">{{ session.vars.distance1 }}</td>
              </tr>
              <tr>
                <td class="tg-60hs">Flight Time</td>
                <td class="tg-480y" colspan="2">{{ session.vars.time1 }}</td>
              </tr>
              <tr>
                <td class="tg-7hap">Additional Price</td>
                <td class="tg-480y"><span style="font-weight:bold">{{ session.vars.price1_a }}</span></td>
                <td class="tg-480y"><span style="font-weight:bold">{{ session.vars.price1_b }}</span></td>
              </tr>
            </tbody>
            </table>
        <br>{% formfield player.choice1 label="Please Select Your Preferred Seat" %}
        </th>
        </tr>
    </thead>
    </table>
    

    {% next_button %}

{% endblock %}